<template>
  <div>
    <div class="component-mainHeader">
      <div class="top">
        <div class="topleft">
          <p>
            <span class="iconfont" style="color:#1abc9a;margin-right:3px;">&#xe607;</span>工作量统计
          </p>
        </div>
        <div class="topright">
          <el-button type="info" @click="$router.go(-1)">
            <span style="font-weight:700;margin-right:5px;" class="iconfont">&#xe662;</span>后退
          </el-button>
        </div>
      </div>
    </div>

    <div class="main">
      <!-- 地图展示 Start -->
      <read-only-amap
        style="margin-bottom:20px;"
        :readOnlyAmapData="readOnlyAmapData"
        v-loading="amapLoading"
        element-loading-text="地图加载中..."
        element-loading-spinner="el-icon-loading"
        v-if="!amapLoading"
      ></read-only-amap>
      <!-- 地图展示 End -->
      <el-tabs v-model="activeName" type="border-card" @tab-click="handleClick" class="tabs-header">
        <el-tab-pane :label="'线路'" name="second">
          <div class="gcl">
            <div class="title">
              线路队
              <span @click="checked = !checked">查看隐藏工程量</span>
            </div>
            <el-table :data="infodetail" tooltip-effect="dark" style border>
              <el-table-column label="序号" align="center" width="80" type="index"></el-table-column>
              <el-table-column label="施工方式" align="center" width="80" prop="optionName"></el-table-column>
              <el-table-column label="施工内容" align="center" width="200" prop="itemContent"></el-table-column>
              <el-table-column label="单位" align="center" width="80" prop="itemUnit"></el-table-column>
              <el-table-column label="预结算数量" align="center" width="100" prop="budget"></el-table-column>
              <el-table-column label="修改数量" align="center" width="80" prop="finalbudget"></el-table-column>
              <!-- <el-table-column label="损耗率" align="center" width="80" prop="num2"></el-table-column> -->
              <el-table-column label="单价" align="center" width="80" prop="price"></el-table-column>
              <el-table-column label="总计" align="center" width="80">
                <template slot-scope="scope">{{(scope.row.finalbudget*scope.row.price)|numFilter}}</template>
              </el-table-column>
              <el-table-column label="备注" align="center" prop="correctCause"></el-table-column>
            </el-table>
          </div>
          <div style="margin-bottom: 20px;">备注说明：</div>
          <transition name="bounce">
            <div class="gcl" v-if="checked">
              <div class="title">隐藏工作量</div>
              <el-table :data="visibleWorkLoad" tooltip-effect="dark" style border>
                <el-table-column label="序号" align="center" width="200" type="index"></el-table-column>
                <el-table-column label="定额编号" align="center" width="200" prop="quotaCode"></el-table-column>
                <el-table-column label="工作内容" align="center" prop="optionName"></el-table-column>
                <el-table-column label="单位" align="center" width="200" prop="testunit"></el-table-column>
                <el-table-column label="数量" align="center" prop="num"></el-table-column>
              </el-table>
            </div>
          </transition>
          <div class="gcl_footer">
            <div class="gcl_footer_top">
              <span style="font-size:16px;">施工队费用：</span>&nbsp;&nbsp;
              <span>预算费用总计：</span>
              <span>{{dataThree.settle}}</span>&nbsp;&nbsp;
              <span>预结算费用总计：</span>
              <span>{{dataThree.budget}}</span>&nbsp;&nbsp;
              <span>终结算费用总计：</span>
              <span>{{dataThree.finalbudget}}</span>
            </div>
            <div
              class="gcl_footer_bottom"
              v-if="ms_roleName == 'CenterFinanceManager'||ms_roleName == 'CenterDeputy'||ms_roleName == 'CenterBOSS'"
            >
              <div>
                <span>对甲方预结算：</span>
                <span style="color:#1abc9c;">{{dataThree.partbPresettlement}}</span>
              </div>
              <div style="margin-top:10px;">
                <span style="font-size:16px;">施工队终结算费用（人工成本）占比：</span>
                <span style="color:#1abc9c;">{{dataThree.partbPercent}}</span>
              </div>
              <div style="margin-top:10px;">
                <el-button
                  @click="$router.push({name:'finalCostDetail',query:{proId:$route.query.proId,proType:'1'}})"
                  style="font-size:16px;"
                >点击查看预结算</el-button>
              </div>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane :label="'熔纤'" name="fourth">
          <div class="gcl">
            <div class="title">
              熔纤队
              <span @click="checked = !checked">查看隐藏工程量</span>
            </div>
            <el-table :data="infodetail" tooltip-effect="dark" style border>
              <el-table-column label="序号" align="center" width="80" type="index"></el-table-column>
              <el-table-column label="施工方式" align="center" width="80" prop="optionName"></el-table-column>
              <el-table-column label="施工内容" align="center" width="200" prop="itemContent"></el-table-column>
              <el-table-column label="单位" align="center" width="80" prop="itemUnit"></el-table-column>
              <el-table-column label="预结算数量" align="center" width="100" prop="budget"></el-table-column>
              <el-table-column label="修改数量" align="center" width="80" prop="finalbudget"></el-table-column>
              <!-- <el-table-column label="损耗率" align="center" width="80" prop="num2"></el-table-column> -->
              <el-table-column label="单价" align="center" width="80" prop="price"></el-table-column>
              <el-table-column label="总计" align="center" width="80">
                <template slot-scope="scope">{{scope.row.finalbudget*scope.row.price|numFilter}}</template>
              </el-table-column>
              <el-table-column label="备注" align="center" prop="correctCause"></el-table-column>
            </el-table>
          </div>
          <div style="margin-bottom: 20px;">备注说明：</div>
          <transition name="bounce">
            <div class="gcl" v-if="checked">
              <div class="title">隐藏工作量</div>
              <el-table :data="visibleWorkLoad" tooltip-effect="dark" style border>
                <el-table-column label="序号" align="center" width="200" type="index"></el-table-column>
                <el-table-column label="定额编号" align="center" width="200" prop="quotaCode"></el-table-column>
                <el-table-column label="工作内容" align="center" prop="optionName"></el-table-column>
                <el-table-column label="单位" align="center" width="200" prop="testunit"></el-table-column>
                <el-table-column label="数量" align="center" prop="num"></el-table-column>
              </el-table>
            </div>
          </transition>
          <div class="gcl_footer">
            <div class="gcl_footer_top">
              <span style="font-size:16px;">施工队费用：</span>&nbsp;&nbsp;
              <span>预算费用总计：</span>
              <span>{{dataThree.settle}}</span>&nbsp;&nbsp;
              <span>预结算费用总计：</span>
              <span>{{dataThree.budget}}</span>&nbsp;&nbsp;
              <span>终结算费用总计：</span>
              <span>{{dataThree.finalbudget}}</span>
            </div>
            <div
              class="gcl_footer_bottom"
              v-if="ms_roleName == 'CenterFinanceManager'||ms_roleName == 'CenterDeputy'||ms_roleName == 'CenterBOSS'"
            >
              <div>
                <span>对甲方预结算：</span>
                <span style="color:#1abc9c;">{{dataThree.partbPresettlement}}</span>
              </div>
              <div style="margin-top:10px;">
                <span style="font-size:16px;">施工队终结算费用（人工成本）占比：</span>
                <span style="color:#1abc9c;">{{dataThree.partbPercent}}</span>
              </div> 
              <div style="margin-top:10px;">
                <el-button
                  @click="$router.push({name:'finalCostDetail',query:{proId:$route.query.proId,proType:'1'}})"
                  style="font-size:16px;"
                >点击查看预结算</el-button>
              </div>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane :label="'管道'" name="first">
          <div class="gcl">
            <div class="title">
              管道队
              <span @click="checked = !checked">查看隐藏工程量</span>
            </div>
            <el-table :data="infodetail" tooltip-effect="dark" style border>
              <el-table-column label="序号" align="center" width="80" type="index"></el-table-column>
              <el-table-column label="施工方式" align="center" width="80" prop="optionName"></el-table-column>
              <el-table-column label="施工内容" align="center" width="200" prop="itemContent"></el-table-column>
              <el-table-column label="单位" align="center" width="80" prop="itemUnit"></el-table-column>
              <el-table-column label="预结算数量" align="center" width="100" prop="budget"></el-table-column>
              <el-table-column label="修改数量" align="center" width="80" prop="finalbudget"></el-table-column>
              <!-- <el-table-column label="损耗率" align="center" width="80" prop="num2"></el-table-column> -->
              <el-table-column label="单价" align="center" width="80" prop="price"></el-table-column>
              <el-table-column label="总计" align="center" width="80">
                <template slot-scope="scope">{{(scope.row.finalbudget*scope.row.price)|numFilter}}</template>
              </el-table-column>
              <el-table-column label="备注" align="center" prop="correctCause"></el-table-column>
            </el-table>
          </div>
          <div style="margin-bottom: 20px;">备注说明：</div>
          <transition name="bounce">
            <div class="gcl" v-if="checked">
              <div class="title">隐藏工作量</div>
              <el-table :data="visibleWorkLoad" tooltip-effect="dark" style border>
                <el-table-column label="序号" align="center" width="200" type="index"></el-table-column>
                <el-table-column label="定额编号" align="center" width="200" prop="quotaCode"></el-table-column>
                <el-table-column label="工作内容" align="center" prop="optionName"></el-table-column>
                <el-table-column label="单位" align="center" width="200" prop="testunit"></el-table-column>
                <el-table-column label="数量" align="center" prop="num"></el-table-column>
              </el-table>
            </div>
          </transition>
          <div class="gcl_footer">
            <div class="gcl_footer_top">
              <span style="font-size:16px;">施工队费用：</span>&nbsp;&nbsp;
              <span>预算费用总计：</span>
              <span>{{dataThree.settle}}</span>&nbsp;&nbsp;
              <span>预结算费用总计：</span>
              <span>{{dataThree.budget}}</span>&nbsp;&nbsp;
              <span>终结算费用总计：</span>
              <span>{{dataThree.finalbudget}}</span>
            </div>
            <div
              class="gcl_footer_bottom"
              v-if="ms_roleName == 'CenterFinanceManager'||ms_roleName == 'CenterDeputy'||ms_roleName == 'CenterBOSS'"
            >
              <div>
                <span>对甲方预结算：</span>
                <span style="color:#1abc9c;">{{dataThree.partbPresettlement}}</span>
              </div>
              <div style="margin-top:10px;">
                <span style="font-size:16px;">施工队终结算费用（人工成本）占比：</span>
                <span style="color:#1abc9c;">{{dataThree.partbPercent}}</span>
              </div>
              <div style="margin-top:10px;">
                <el-button
                  @click="$router.push({name:'finalCostDetail',query:{proId:$route.query.proId,proType:'1'}})"
                  style="font-size:16px;"
                >点击查看预结算</el-button>
              </div>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane :label="'设备'" name="third">
          <div class="gcl">
            <div class="title">
              设备队
              <span @click="checked = !checked">查看隐藏工程量</span>
            </div>
            <el-table :data="infodetail" tooltip-effect="dark" style border>
              <el-table-column label="序号" align="center" width="80" type="index"></el-table-column>
              <el-table-column label="施工方式" align="center" width="80" prop="optionName"></el-table-column>
              <el-table-column label="施工内容" align="center" width="200" prop="itemContent"></el-table-column>
              <el-table-column label="预结算数量" align="center" width="100" prop="budget"></el-table-column>
              <el-table-column label="修改数量" align="center" width="80" prop="finalbudget"></el-table-column>
              <!-- <el-table-column label="损耗率" align="center" width="80" prop="num2"></el-table-column> -->
              <el-table-column label="单价" align="center" width="80" prop="price"></el-table-column>
              <el-table-column label="总计" align="center" width="80">
                <template slot-scope="scope">{{(scope.row.finalbudget*scope.row.price)|numFilter}}</template>
              </el-table-column>
              <el-table-column label="备注" align="center" prop="correctCause"></el-table-column>
            </el-table>
          </div>
          <div style="margin-bottom: 20px;">备注说明：</div>
          <transition name="bounce">
            <div class="gcl" v-if="checked">
              <div class="title">隐藏工作量</div>
              <el-table :data="visibleWorkLoad" tooltip-effect="dark" style border>
                <el-table-column label="序号" align="center" width="200" type="index"></el-table-column>
                <el-table-column label="定额编号" align="center" width="200" prop="quotaCode"></el-table-column>
                <el-table-column label="工作内容" align="center" prop="optionName"></el-table-column>
                <el-table-column label="单位" align="center" width="200" prop="testunit"></el-table-column>
                <el-table-column label="数量" align="center" prop="num"></el-table-column>
              </el-table>
            </div>
          </transition>
          <div class="gcl_footer">
            <div class="gcl_footer_top">
              <span style="font-size:16px;">施工队费用：</span>&nbsp;&nbsp;
              <span>预算费用总计：</span>
              <span>{{dataThree.settle}}</span>&nbsp;&nbsp;
              <span>预结算费用总计：</span>
              <span>{{dataThree.budget}}</span>&nbsp;&nbsp;
              <span>终结算费用总计：</span>
              <span>{{dataThree.finalbudget}}</span>
            </div>
            <div
              class="gcl_footer_bottom"
              v-if="ms_roleName == 'CenterFinanceManager'||ms_roleName == 'CenterDeputy'||ms_roleName == 'CenterBOSS'"
            >
              <div>
                <span>对甲方预结算：</span>
                <span style="color:#1abc9c;">{{dataThree.partbPresettlement}}</span>
              </div>
              <div style="margin-top:10px;">
                <span style="font-size:16px;">施工队终结算费用（人工成本）占比：</span>
                <span style="color:#1abc9c;">{{dataThree.partbPercent}}</span>
              </div>
              <div style="margin-top:10px;">
                <el-button
                  @click="$router.push({name:'finalCostDetail',query:{proId:$route.query.proId,proType:'1'}})"
                  style="font-size:16px;"
                >点击查看预结算</el-button>
              </div>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>
<script>
import readOnlyAmap from '@/components/common/amap/readOnlyAmap'
export default {
  name: 'teamWork',
  components: {
    readOnlyAmap
  },
  data() {
    return {
      ms_roleName: localStorage.getItem('roleName'),
      type: true,
      activeName: 'second',
      // 隐藏工作量bool值
      checked: false,
      //主 表格数据
      infodetail: [],
      // 隐藏工作量表格数据
      visibleWorkLoad: [],
      // 弹窗bool值
      dialogVisible: false,
      dataThree: {
        settle: '',
        budget: '',
        finalbudget: ''
      },
      readOnlyAmapData: {}, // 地图数据对象
      amapLoading: true // 地图loading
    }
  },
  created() {
    this.dataInit()
  },
  mounted() {
    this.getReadOnlyAmapData()
  },
  methods: {
    dataInit() {
      let tabs
      switch (this.activeName) {
        case 'first':
          tabs = '1'
          break
        case 'second':
          tabs = '2'
          break
        case 'third':
          tabs = '3'
          break
        case 'fourth':
          tabs = '4'
          break
        default:
          tabs = '1'
          break
      }
      let that = this,
        suCb = res => {
          console.log('查询结果', res)
          that.infodetail = res.data.res || []
          that.dataThree = res.data.budget || {}
          that.visibleWorkLoad = res.data.testWorks || []
          that.dataThree.partbPercent =
            (res.data.budget.partbPresettlement
              ? parseFloat(
                  res.data.budget.budget / res.data.budget.partbPresettlement
                ).toFixed(2)
              : 0) + '%'
        },
        erCb = res => {},
        req = {
          url: '/api/web/proProject/auditWorkLoad',
          methods: 'post',
          data: { proId: that.$route.query.proId, workType: tabs },
          success: suCb,
          error: erCb
        }
      console.log('查询参数', req.data)
      that.$https(req)
    },
    // 点击tab切换
    handleClick(tab, event) {
      this.dataInit()
    },

    handleChange(value) {
      console.log(value)
    },
    /**
     * 获取施工队上传数据后绘图的方法
     */
    getReadOnlyAmapData() {
      let succ = res => {
        res = res.data
        if (res.flag == 1) {
          res = res.res

          let points = res.mapPointList
          let pro_id = res.proId
          let pro_lnglat = [res.lng, res.lat]

          this.readOnlyAmapData.pro_id = pro_id
          this.readOnlyAmapData.pro_lnglat = pro_lnglat
          this.readOnlyAmapData.points = points

          // TODO: points 如果后端传来的属性不一样需要修改
          this.amapLoading = false
        }
      }
      let err = res => {}
      let params = {
        proId: this.$route.query.proId
      }
      let data = {
        url: '/api/web/proProject/queryFinalWorkLoad ',
        methods: 'post',
        data: params,
        success: succ,
        error: err
      }
      if (params.proId) {
        this.$https(data)
      }

      // mock的模拟数据
      // this.$axios.get('/mock/queryFinalWorkLoad.json').then(res => {
      //   succ(res)
      // })
    }
  }
}
</script>
<style scoped>
.bounce-enter {
  margin-top: -100px;
}
.bounce-enter-active {
  transition: all 1s ease;
}

.bounce-enter-to {
  margin-top: 0px;
}

.bounce-leave-active {
  transition: all 0.3s ease;
}

.main {
  width: 1100px;
  margin: 20px auto;
  text-align: left;
}
.gcl {
  margin-bottom: 20px;
}
.gcl .title {
  background: #f8f8f8;
  height: 35px;
  line-height: 35px;
  color: #666;
  padding: 0 20px;
  font-size: 14px;
  border: 1px solid #e4e4e4;
  border-bottom: none;
  text-align: left;
}
a {
  color: #1abc9c;
  cursor: pointer;
  text-decoration: none;
}
.xiu {
  text-align: left;
  margin-bottom: 20px;
}
.xiu span {
  display: inline-block;
  text-align: right;
  width: 85px;
  margin-right: 15px;
}

.gcl span {
  float: right;
  font-size: 12px;
  border: 1px solid rgba(204, 204, 204, 1);
  margin-top: 4px;
  width: 120px;

  line-height: 26px;
  text-align: center;
}
.gcl span:hover {
  cursor: pointer;
  opacity: 0.7;
}

/* 工程量管理 底部 价格显示 */
.gcl_footer {
  text-align: right;
}

.gcl_footer .gcl_footer_top {
  margin-bottom: 10px;
  font-size: 18px;
}

.gcl_footer .gcl_footer_top span:nth-child(2n + 3),
.gcl_footer .gcl_footer_bottom span:nth-child(2n + 3) {
  color: #1abc9c;
}

.gcl_footer .gcl_footer_bottom {
  margin-bottom: 10px;
  font-size: 19px;
}
</style>
